<template>
	<view class="deatil">
		<up-navbar title="" bg-color="#00000000" :auto-back="true" left-icon-color="#fff"></up-navbar>
		<view class="d-con">
			<image :src="details.dt.img" mode="aspectFill"></image>
			<view class="d-content">
				<view class="j-con">
					<view class="tit" style="display: flex;">
						<text style="margin-right: 7px;font-size: 17px">{{ details.dt.title }}</text>
						<view class="circle">
							<text class="cir">5A级景区</text>
						</view>
						<!-- <up-tag text="5A级景区"  size="mini" shape="circle"></up-tag> -->
					</view>
					
					<view class="jj">
						<view class="" style="font-weight: 700;font-size: 14px;">景区介绍：</view>
						<view class="nr">{{ details.dt.introduce }}</view>
					</view>
					
					<view class="j-con">
						<text style="font-weight: 700;font-size: 14px;">开放时间：</text>
						<text class="nr">{{ details.dt.times }}</text>
					</view>
					
					<view class="j-con ls">
						<view class="tit" style="font-size: 34rpx;">游玩推荐</view>
						<view class="jj tj-list">
							<view class="item" v-for="(itm,idx) in projectList" :key="index" @click="goLine(itm)">
								<image :src="itm.url" mode="aspectFill"></image>
								<view class="topFixed">
									{{ itm.tag }}
								</view>
								<view class="infos">
									<view class="tit">{{ itm.title }}</view>
									<view class="desc">
										<up-icon name="map" color="#9c9c9c" size="16"></up-icon>
										<text class="text">{{ itm.desc }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue';
import {detailProject} from '@/api/index.js'
import { ref } from 'vue';

const details = reactive({
	dt:''
})

const projectList = ref([])

onLoad((opt) =>{
	details.dt = JSON.parse(decodeURIComponent(opt.item))
	console.log(JSON.parse(decodeURIComponent(opt.item)))
	detailProjectList()
})

const detailProjectList = async () =>{
	let res = await detailProject()
	projectList.value = res.data
	console.log(res)
}

const goLine = (itm) =>{
	uni.navigateTo({
		url:`/pages/line/line?id=${itm.id}`
	})
}
</script>

<style lang="scss" scoped>
.deatil{
	background-color: #fff;
	.d-con{
		image{
			width: 100%;
			height: 600rpx;
		}
	}
	.d-content{
		width: 100%;
		height: 700rpx;
		margin-top: -40rpx;
		background-color: #fff;
		padding: 35rpx 30rpx;
		box-sizing: border-box;
		//border-radius: 0rpx 30rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		position: relative;
		z-index: 9;
	}
	.j-con{
		margin-bottom: 30rpx;
		.tit{
			font-size: 36rpx;
			font-weight: 700;
			color: #111;
			margin-bottom: 30rpx;
			.circle{
				background-color: royalblue;
				padding: 10rpx;
				border-radius: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.cir{
					font-size: 26rpx;
					color: #fff;
				}
			}
		}
		.jj{
			.nr{
				font-size: 26rpx;
				color: #8a8a8a;
				//line-height: 40rpx;
			}
		}
		
		.tj-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				position: relative;
				width: 48%;
				margin-bottom: 20rpx;
				box-shadow: 1px 2px 3px #e5e5e5;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				overflow: hidden;
				.topFixed{
					position: absolute;
					top: 0;
					left: 0;
					border-top-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
					background-color: #ffaa7f;
					color: #fff;
					text-align: center;
					font-size: 22rpx;
					padding: 5rpx 20rpx;
					box-sizing: border-box;
				}
				image{
					width: 100%;
					height: 200rpx;
				}
				.infos{
					padding: 10rpx 15rpx;
					.tit{
						font-size: 28rpx;
						font-weight: 700;
						color: #111;
						margin-bottom: 15rpx;
						text-overflow: ellipsis;
					}
					.desc{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 26rpx;
						color: #8a8a8a;
					}
				}
			}
		}
	}
}
</style>
